<script setup lang="ts">
import * as THREE from "three";

//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

//创建场景
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera(
  45, //视角
  window.innerWidth / window.innerHeight, //相机宽高比
  0.1, //近平面
  1000
); //原平面

//创建渲染器
const renderer = new THREE.WebGLRenderer();

//创建几何体
const geometry = new THREE.BoxGeometry(2, 2, 2);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

let parentCube = new THREE.Mesh(geometry, parentMaterial);
//父元素里边添加子元素
//创建网格
const cube = new THREE.Mesh(geometry, material);
parentCube.add(cube);
parentCube.position.set(-3, 0, 0);
cube.position.set(3, 0, 0);

//位移缩放
//设置立方体的放大
// cube.scale.set(2,2,2)
// parentCube.scale.set(2,2,2)

//旋转
cube.rotation.set(Math.PI / 4, 0, 0);

parentCube.rotation.set(Math.PI / 4, 0, 0);
// cube.position.set(2,2,2)
//添加到场景
// scene.add(cube)
scene.add(parentCube);

//设置相机位置
camera.position.z = 10;
camera.position.y = 10;
camera.position.x = 10;
//相机看向哪里
camera.lookAt(0, 0, 0);

//添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(999);
scene.add(axesHelper);
//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
//设置带阻尼
// controls.enableDamping=true

//设置阻尼系数
// controls.dampingFactor=0.05
//设置旋转速度
// controls.autoRotateSpeed=0.5
//设置旋转速度
// controls.autoRotate=true
//渲染函数
function animate() {
  controls.update();
  // 下一针继续调用animate
  requestAnimationFrame(animate);
  // cube.rotation.x+=0.01
  // cube.rotation.y+=0.01
  renderer.render(scene, camera);
}
//渲染

// document.body.appendChild(renderer.domElement)

setTimeout(() => {
  const dom = document.getElementById("test01");
  camera.aspect = dom!.offsetWidth / dom!.offsetHeight;
  //监听屏幕变化
  window.addEventListener("resize", () => {
    //重置画布宽高
    renderer.setSize(dom!.offsetWidth, dom!.offsetHeight);
    //重置相机视窗宽高
    camera.aspect = dom!.offsetWidth / dom!.offsetHeight;
    //更新相机投影矩阵
    camera.updateProjectionMatrix();
  });
  renderer.setSize(dom!.offsetWidth, dom!.offsetHeight); //渲染器画布大小
  dom!.appendChild(renderer.domElement);
  renderer.render(scene, camera);

  animate();
}, 0);
</script>

<template>
  <div id="test01">

  </div>
  <button @click='renderer.domElement.requestFullscreen()' style="position: fixed; top: 0; left: 0;z-index: 999;">点击全屏</button>
  <button @click='renderer.domElement.exitFullscreen()' style="position: fixed; top: 0; right: 0;">退出全屏</button>
 
</template>

<style scoped>
#test01 {
  height: 100%;
  width: 100%;
  color: white;
  background-color: rgb(255, 255, 255);
}
</style>
